<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
</head>
<body>
    <h1>WebSocket Test</h1>
    <div id="status">Connecting...</div>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        const statusDiv = document.getElementById('status');
        const messagesDiv = document.getElementById('messages');
        const messageInput = document.getElementById('messageInput');
        let ws;

        function connect() {
            const wsUrl = 'ws://localhost:9000/ws?clubId=1&userId=1&nickname=admin&avatar=test.png';
            console.log('Connecting to:', wsUrl);
            
            ws = new WebSocket(wsUrl);
            
            ws.onopen = function(event) {
                console.log('WebSocket connected successfully');
                statusDiv.textContent = 'Connected';
                statusDiv.style.color = 'green';
                addMessage('System: Connected to WebSocket');
            };
            
            ws.onmessage = function(event) {
                console.log('Received message:', event.data);
                addMessage('Server: ' + event.data);
            };
            
            ws.onclose = function(event) {
                console.log('WebSocket closed:', event.code, event.reason);
                statusDiv.textContent = 'Disconnected (Code: ' + event.code + ')';
                statusDiv.style.color = 'red';
                addMessage('System: Disconnected - Code: ' + event.code + ', Reason: ' + event.reason);
            };
            
            ws.onerror = function(error) {
                console.error('WebSocket error:', error);
                statusDiv.textContent = 'Error';
                statusDiv.style.color = 'red';
                addMessage('System: WebSocket error occurred');
            };
        }
        
        function sendMessage() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const message = messageInput.value;
                if (message.trim()) {
                    console.log('Sending message:', message);
                    ws.send(JSON.stringify({content: message}));
                    addMessage('Client: ' + message);
                    messageInput.value = '';
                }
            } else {
                addMessage('System: WebSocket not connected');
            }
        }
        
        function addMessage(text) {
            const div = document.createElement('div');
            div.textContent = new Date().toLocaleTimeString() + ' - ' + text;
            messagesDiv.appendChild(div);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
        
        // Auto-connect on page load
        connect();
        
        // Allow Enter key to send message
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html> 